<template>
	<u-popup v-model="copyShow" mode="bottom" @close='close'>
		<view class="copyShow" v-if="info">
			<view class="top">
				<view class="body-title">商业版权总收入</view>
				<view class="body-price">￥<u-count-to :start-val="30" color='#FADEB8' :end-val="info.copyright" :font-size='68'></u-count-to></view>
			</view>
			<view class="copy-box">
				<view class="copy-title">
					<view class="left">
						<view class="title-name">商业版权总收入</view>
						<view class="title-tips">可持续获得商业版权收入</view>
					</view>
					<view class="right">￥<u-count-to :font-size='24' :start-val="30" :end-val="info.copyright"></u-count-to></view>
				</view>
				<view class="txt-tips">版权价值分配</view>
				<view class="item-box">
					<view class="item">
						<view class="i-title">{{info.title}}</view>
						<view class="i-o">{{info.proportion}}%</view>
					</view>
					<view class="item">
						<view class="i-title">{{info.title_1}}</view>
						<view class="i-o">{{info.proportion_1}}%</view>
					</view>
					<view class="item">
						<view class="i-title">{{info.jg_title}}</view>
						<view class="i-o">{{info.bq_proportion}}%</view>
					</view>
				</view>
				<view class="copy-title">
					<view class="left">
						<view class="title-name">商业版权总收入</view>
					</view>
					<view class="right">￥<u-count-to :start-val="30"  :font-size='24' :end-val="info.copyright"></u-count-to></view>
				</view>
				<view class="copy-tips">商业授权参与海内外商业活动、游艇、酒店、展馆等应用场景都会持续获得版权收入。</view>
				<view class="tips-die">版权价值分配</view>
				<view class="die-card">
					<view class="i-title">{{info.jg_title}}</view>
					<view class="i-o">{{info.bq_proportion}}%</view>
				</view>
			</view>
			
			<u-icon name="close-circle" color="#fff" size="48" class="poin" @click='copyShow = false'></u-icon>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: [String, Boolean],
				default: false
			}
		},
		watch: {
			show: {
				handler(newval, oldVal) {
					this.copyShow = this.show;
				},
				immediate: true
			}
		},
		data() {
			return {
				copyShow: false,
				num: 0,
				info:null
			}
		},
		mounted() {
			this.getinfo();
		},
		methods:{
			close(){
				this.$emit('close')
			},
			//版權數據
			getinfo(){
				this.$http.asyncSendrequest({
					url:'/common/copyright',
					success:res=>{
						this.info = res.data;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.copyShow{
		width: 100%;
		height: 90vh;
		position: relative;
		.top{
			padding-top: 82rpx;
			.body-title{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
			.body-price{
				font-size: 68rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FADEB8;
				margin-top: 20rpx;
				text-align: center;
				padding-right: 14rpx;
				box-sizing: border-box;
			}
		}
		.copy-box{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(90vh - 310rpx);
			background: #F7F8FA;
			border-radius: 50rpx 50rpx 0px 0px;
			padding: 55rpx 30rpx 0;
			box-sizing: border-box;
			.copy-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					.title-name{
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #000000;
					}
					.title-tips{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-top: 18rpx;
					}
				}
				.right{
					width: 161rpx;
					height: 51rpx;
					background: #FFFFFF;
					border: 1rpx solid #000000;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}
		.txt-tips{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-top: 60rpx;
			font-weight: bold;
		}
		.item-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0 70rpx;
			.item{
				width: 217rpx;
				height: 120rpx;
				background: #292929;
				border-radius: 20rpx;
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				.i-title{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
				.i-o{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: right;
					margin-top: 12rpx;
				}
			}
		}
		.copy-tips{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 28rpx;
		}
		.tips-die{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-top: 50rpx;
		}
		.die-card{
			height: 120rpx;
			background: #292929;
			border-radius: 20rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.i-title{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.i-o{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: right;
				margin-top: 12rpx;
			}
		}
		.poin{
			position: absolute;
			top: 0;
			right: 20rpx;
		}
	}
</style>